<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="/css/common.css?v=2" rel="stylesheet">

    <title>Data Life</title>
</head>
<body>
<div class="container" id="app-main" v-cloak>
    <div class="row" style="margin-top: 10%">
        <div class="col-12">
            <div class="list-group">
                <a href="javascript:void(0)" class="list-group-item list-group-item-action" v-for="(record, index) in records">
                    <div class="row">
                        <div class="col-8" @click="goWeek(record.id)">{{ record.name }}</div>
                        <div class="col-4 text-right" @click="clickModal(index)">
                            <span class="fas fa-angle-right"></span>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0)" class="list-group-item list-group-item-action">
                    <div class="row" @click="clickCreateModal">
                        <div class="col-8"></div>
                        <div class="col-4 text-right">
                            <span class="fas fa-plus"></span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 10%">
        <div class="col-12">
            <button class="btn btn-light" @click="logout">登出</button>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <form v-if="records.length > 0">
                                <div class="form-group row">
                                    <div class="col-4">
                                        <input type="text" class="form-control" v-model="records[index].name">
                                    </div>
                                    <div class="col-4">
                                        <div class="custom-control custom-switch" style="padding-top: 5%;">
                                            <input type="checkbox" class="custom-control-input" id="customSwitch" v-model="records[index].allow_cumulate">
                                            <label class="custom-control-label" for="customSwitch">累加</label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <input type="number" class="form-control" v-model="records[index].sort">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-12">
                                        <input type="text" class="form-control" v-model="records[index].comment">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" @click="clickDelete(index)">Delete</button>
                    <button type="button" class="btn btn-outline-success" @click="clickUpdate(index)">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <form>
                                <div class="form-group row">
                                    <div class="col-4">
                                        <input type="text" class="form-control" v-model="name" placeholder="名称">
                                    </div>
                                    <div class="col-4">
                                        <div class="custom-control custom-switch" style="padding-top: 5%;">
                                            <input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="allowCumulate">
                                            <label class="custom-control-label" for="customSwitch1">累加</label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <input type="number" class="form-control" v-model="sort">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-12">
                                        <input type="text" class="form-control" v-model="comment" placeholder="备注">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-success" @click="clickCreate">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.26.0/axios.min.js"></script>

<script src="https://cdn.staticfile.org/moment.js/2.29.1/moment.min.js"></script>
<script src="https://kit.fontawesome.com/e78d7410b3.js" crossorigin="anonymous"></script>

<script src="/js/env.js?v=1"></script>
<script src="/js/common.js?v=2"></script>
<script>
    // let serverData = {"list":[{"name":"修身养性","id":12},{"name":"暴躁","id":13},{"name":"健身","id":1},{"name":"PE","id":2},{"name":"支出","id":3},{"name":"收入","id":4},{"name":"手中 Money","id":5}]};
    // let vm = initVueApp();
    let serverData, vm;

    axios.get(env.apiPrefix + '/records', {})
        .then(function (response) {
            if (response.data.code) {
                return;
            }
            serverData = response.data.data;
            vm = initVueApp();
        });

    function initVueApp() {
        return new Vue({
            el: '#app-main',
            data: {
                records: serverData.list,
                index: 0,
                name: null,
                comment: null,
                allowCumulate: true,
                sort: 100,
                canSave: true
            },
            methods: {
                goWeek: function (id) {
                    window.location.href = generateUrl('/record/week.html', {record_id: id});
                },
                logout: function () {
                    let r = confirm("是否确定登出");
                    if (r == false) {
                        return false;
                    }

                    axios.post(env.apiPrefix + '/users/logout', {})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            window.location.href = generateUrl('/user/login.html', {from: window.location.href});
                        });
                },
                clickModal: function (index) {
                    this.index = index;
                    $('#updateModal').modal("show");
                },
                clickUpdate: function (index) {
                    let r = confirm("是否确定修改");
                    if (r == false) {
                        return false;
                    }

                    let record = this.records[index];

                    let requestData = {
                        name: record.name,
                        comment: record.comment,
                        allow_cumulate: record.allow_cumulate,
                        sort: record.sort
                    };
                    axios.put(generateUrl(`/records/${record.id}`, {}, env.apiPrefix), requestData)
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            $('#updateModal').modal("hide");
                        });
                },
                clickDelete: function (index) {
                    let r = confirm("是否确定删除");
                    if (r == false) {
                        return false;
                    }

                    let record = vm.records[index];

                    axios.delete(generateUrl(`/records/${record.id}`, {}, env.apiPrefix), {})
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            vm.index = 0;
                            vm.records.splice(index, 1);
                            $('#updateModal').modal("hide");
                        });
                },
                clickCreateModal: function () {
                    $('#createModal').modal("show");
                },
                clickCreate: function () {
                    if (!this.canSave) {
                        return false;
                    }
                    this.canSave = false;

                    let requestData = {
                        name: this.name,
                        comment: this.comment,
                        allow_cumulate: this.allowCumulate,
                        sort: this.sort
                    };
                    axios.post(generateUrl('/records', {}, env.apiPrefix), requestData)
                        .then(function (response) {
                            if (response.data.code) {
                                return;
                            }

                            let record = {
                                id: response.data.data.id,
                                name: requestData.name,
                                comment: requestData.comment,
                                allow_cumulate: requestData.allow_cumulate,
                                sort: requestData.sort
                            };
                            vm.records.push(record);

                            vm.name = null;
                            vm.comment = null;
                            vm.allowCumulate = true;
                            vm.sort = 100;
                            vm.canSave = true;

                            $('#createModal').modal("hide");
                        }).catch(function (error) {
                        vm.canSave = true;
                    });
                }
            }
        });
    }
</script>

</body>
</html>
